<!-- 网站功能介绍页面 -->
<template>
  <div class="mail-help-page">
    <!-- 顶部导航 -->
    <header class="top-nav">
      <div class="nav-container">
        <div class="nav-left">
          <img
            src="@/assets/images/logo.png"
            alt="贵港文旅+"
            class="nav-logo"
          />
          <div class="brand-wrapper">
            <span class="brand-name">贵港文旅+</span>
            <span class="brand-pinyin">GUIGANGWENLV+</span>
          </div>
          <span class="divider">|</span>
          <span class="nav-title">你的专业文旅助手</span>
        </div>
        <div class="nav-right">
          <router-link to="/" class="nav-link">贵港文旅首页</router-link>
          <router-link to="/download/app" class="nav-link"
            >手机App下载</router-link
          >
          <router-link to="/download/desktop" class="nav-link"
            >电脑客户端下载</router-link
          >
          <router-link to="/merchant/apply" class="nav-link"
            >商家入驻</router-link
          >
          <router-link to="/help" class="nav-link">帮助</router-link>
          <router-link to="/feedback" class="nav-link">反馈</router-link>
          <router-link to="/login" class="nav-link login-link"
            >去登录</router-link
          >
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <div class="main-container">
      <div class="guide-container">
        <div class="guide-header">
          <h1 class="title">贵港文旅+ 使用指南</h1>
          <p class="subtitle">了解贵港文旅+的全部功能，开启您的文旅之旅</p>
        </div>

        <div class="guide-content">
          <div
            v-for="section in guideSections"
            :key="section.id"
            class="guide-section"
          >
            <div class="section-header">
              <el-icon class="section-icon"
                ><component :is="section.icon"
              /></el-icon>
              <h2 class="section-title">{{ section.title }}</h2>
            </div>
            <div class="section-content">
              <p class="section-desc">{{ section.description }}</p>
              <div class="feature-grid">
                <div
                  v-for="feature in section.features"
                  :key="feature.id"
                  class="feature-card"
                >
                  <div class="feature-icon">
                    <el-icon><component :is="feature.icon" /></el-icon>
                  </div>
                  <div class="feature-info">
                    <h3>{{ feature.title }}</h3>
                    <p>{{ feature.description }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="quick-actions">
          <h2>快速入口</h2>
          <div class="action-grid">
            <router-link
              v-for="action in quickActions"
              :key="action.path"
              :to="action.path"
              class="action-card"
            >
              <el-icon><component :is="action.icon" /></el-icon>
              <span>{{ action.label }}</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="page-footer">
      <div class="footer-info">
        <span>贵港文旅版权所有 ©2024</span>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {
  Compass,
  Ticket,
  ShoppingBag,
  Guide,
  Location,
  ChatLineRound,
  Camera,
  Van,
  House,
  Calendar,
  Document,
  Setting,
  User,
  CreditCard,
  Star,
  Message,
  Bell,
  Picture,
  Food,
  Hotel,
  Service,
} from "@element-plus/icons-vue";

const guideSections = [
  {
    id: 1,
    title: "景点游览",
    icon: "Compass",
    description: "探索贵港特色景点，体验本地文化",
    features: [
      {
        id: 1,
        icon: "Ticket",
        title: "门票预订",
        description: "便捷的景点门票在线预订服务",
      },
      {
        id: 2,
        icon: "Guide",
        title: "导游服务",
        description: "专业导游讲解，深入了解景点文化",
      },
      {
        id: 3,
        icon: "Location",
        title: "智能导航",
        description: "景区实时导航，轻松规划路线",
      },
    ],
  },
  {
    id: 2,
    title: "文创购物",
    icon: "ShoppingBag",
    description: "特色文创产品，带回贵港记忆",
    features: [
      {
        id: 1,
        icon: "House",
        title: "文创商城",
        description: "精选贵港特色文创产品",
      },
      {
        id: 2,
        icon: "CreditCard",
        title: "安全支付",
        description: "多种支付方式，交易有保障",
      },
      {
        id: 3,
        icon: "Van",
        title: "快递配送",
        description: "便捷的物流配送服务",
      },
    ],
  },
  {
    id: 3,
    title: "智能服务",
    icon: "ChatLineRound",
    description: "智能化服务，提升游览体验",
    features: [
      {
        id: 1,
        icon: "Service",
        title: "AI导游",
        description: "智能语音讲解，随时了解景点",
      },
      {
        id: 2,
        icon: "Calendar",
        title: "行程规划",
        description: "智能推荐最佳游览路线",
      },
      {
        id: 3,
        icon: "Bell",
        title: "实时通知",
        description: "及时获取景区动态信息",
      },
    ],
  },
  {
    id: 4,
    title: "社区互动",
    icon: "Message",
    description: "分享旅行故事，结识志同道合的朋友",
    features: [
      {
        id: 1,
        icon: "Picture",
        title: "游记分享",
        description: "记录精彩瞬间，分享旅行体验",
      },
      {
        id: 2,
        icon: "Star",
        title: "景点评价",
        description: "真实游客点评，助您决策",
      },
      {
        id: 3,
        icon: "ChatLineRound",
        title: "互动交流",
        description: "与其他游客交流分享经验",
      },
    ],
  },
  {
    id: 5,
    title: "特色体验",
    icon: "Camera",
    description: "独特的文化体验活动",
    features: [
      {
        id: 1,
        icon: "Food",
        title: "美食体验",
        description: "品尝地道美食，感受饮食文化",
      },
      {
        id: 2,
        icon: "Camera",
        title: "摄影打卡",
        description: "发现最美景点，定格精彩瞬间",
      },
      {
        id: 3,
        icon: "Hotel",
        title: "特色住宿",
        description: "体验当地特色民宿",
      },
    ],
  },
];

const quickActions = [
  { label: "景点预订", icon: "Ticket", path: "/spots" },
  { label: "导游服务", icon: "Guide", path: "/tour-guide" },
  { label: "文创商城", icon: "ShoppingBag", path: "/shop" },
  { label: "智能导览", icon: "Location", path: "/map" },
  { label: "社区广场", icon: "Message", path: "/community" },
  { label: "个人中心", icon: "User", path: "/user" },
];
</script>

<style lang="scss" scoped>
.mail-help-page {
  @apply min-h-screen flex flex-col relative;
  background: url("@/assets/images/register-bg.jpg") center/cover fixed
    no-repeat;
  height: 100vh;
  overflow: hidden;

  &::before {
    content: "";
    @apply fixed inset-0 z-0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0) 64px,
      rgba(255, 255, 255, 0) calc(100% - 64px),
      rgba(255, 255, 255, 0.9) 100%
    );

    .dark & {
      background: linear-gradient(
        to bottom,
        rgba(17, 24, 39, 0.9) 0%,
        rgba(17, 24, 39, 0.4) 64px,
        rgba(17, 24, 39, 0.4) calc(100% - 64px),
        rgba(17, 24, 39, 0.9) 100%
      );
    }
    pointer-events: none;
  }

  .top-nav {
    @apply w-full fixed top-0 left-0 z-50;

    .nav-container {
      @apply max-w-7xl mx-auto h-16 flex items-center justify-between;
      padding-left: 16px;
      padding-right: 8px;

      .nav-left {
        @apply flex items-center;

        .nav-logo {
          @apply h-14 mr-2;

          .dark & {
            filter: brightness(1.2)
              drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
          }
        }

        .brand-wrapper {
          @apply flex flex-col justify-center;

          .brand-name {
            @apply text-2xl font-bold text-gray-800 dark:text-gray-100 leading-6;
          }

          .brand-pinyin {
            @apply text-[8px] text-gray-500 dark:text-gray-400 mt-0.5;
          }
        }

        .divider {
          @apply mx-3 text-gray-300 dark:text-gray-600 text-xl;
        }

        .nav-title {
          @apply text-gray-700 dark:text-gray-200 text-lg font-medium;
        }
      }

      .nav-right {
        @apply flex items-center;
        gap: 24px;

        .nav-link {
          @apply text-sm text-gray-600 dark:text-gray-300 hover:text-[#2e74e5] dark:hover:text-[#60a5fa] transition-colors;
        }
      }
    }
  }

  .main-container {
    @apply flex-1 mt-16 mb-16 mx-auto w-full max-w-7xl;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    padding: 3rem;

    .dark & {
      background: rgba(31, 41, 55, 0.9);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .guide-container {
      .guide-header {
        @apply text-center mb-12;

        .title {
          @apply text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4;
          background: linear-gradient(to right, #2563eb, #3b82f6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

          .dark & {
            background: none;
            -webkit-text-fill-color: white;
          }
        }

        .subtitle {
          @apply text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto;
        }
      }

      .guide-content {
        @apply space-y-8;

        .guide-section {
          @apply bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8;

          .section-header {
            @apply flex items-center gap-4 mb-6;

            .section-icon {
              @apply text-3xl text-primary-500 dark:text-primary-400;
            }

            .section-title {
              @apply text-2xl font-bold text-gray-900 dark:text-gray-100;
            }
          }

          .section-content {
            .section-desc {
              @apply text-gray-600 dark:text-gray-400 mb-8;
            }

            .feature-grid {
              @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;

              .feature-card {
                @apply flex items-start gap-4 p-6 rounded-xl bg-gray-50 dark:bg-gray-700/50
                       transform transition-all duration-300 hover:scale-105 hover:shadow-md;

                .feature-icon {
                  @apply w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center flex-shrink-0;

                  .el-icon {
                    @apply text-2xl text-primary-500 dark:text-primary-400;
                  }
                }

                .feature-info {
                  h3 {
                    @apply text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2;
                  }

                  p {
                    @apply text-sm text-gray-600 dark:text-gray-400;
                  }
                }
              }
            }
          }
        }
      }

      .quick-actions {
        @apply mt-16;

        h2 {
          @apply text-2xl font-bold text-center mb-8 text-gray-900 dark:text-gray-100;
        }

        .action-grid {
          @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4;

          .action-card {
            @apply flex flex-col items-center gap-3 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm
                   hover:shadow-md transition-all duration-300 cursor-pointer;

            .el-icon {
              @apply text-3xl text-primary-500 dark:text-primary-400;
            }

            span {
              @apply text-gray-700 dark:text-gray-300 font-medium;
            }

            &:hover {
              @apply transform -translate-y-1;
            }
          }
        }
      }
    }
  }

  .page-footer {
    @apply w-full py-6 text-center fixed bottom-0 left-0 z-50;
    background: transparent;

    .footer-info {
      @apply text-sm text-gray-500 dark:text-gray-400;
    }
  }
}

@media (max-width: 1024px) {
  .mail-help-page {
    .main-container {
      @apply px-6;

      .guide-container {
        .guide-header {
          .title {
            @apply text-3xl;
          }
        }

        .guide-content {
          .guide-section {
            @apply p-6;

            .feature-grid {
              @apply grid-cols-1;
            }
          }
        }

        .quick-actions {
          .action-grid {
            @apply grid-cols-2;
          }
        }
      }
    }
  }
}

@media (max-width: 640px) {
  .mail-help-page {
    .main-container {
      @apply px-4 py-6;

      .guide-container {
        .guide-header {
          .title {
            @apply text-2xl;
          }
        }

        .guide-content {
          .guide-section {
            @apply p-4;

            .feature-grid {
              @apply grid-cols-1;
            }
          }
        }

        .quick-actions {
          .action-grid {
            @apply grid-cols-2;
          }
        }
      }
    }
  }
}
</style>
